
<!-- 生产报表->生产入库领料查询 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <div ref="print" class="credentials-wrapper" id="documents-wrapper">
                <div style="min-height:400px;">
                    <h3 class="text-center">
                        <span class="text-name">生产入库领料查询</span><br>
                    </h3>
                    <!-- 按钮 -->
                    <div class="btn-wrapper clearfix" style="border:none;">
                        <a-row class="text-center clearfix">
                            <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                                <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                                    <div class="btns" @click="searchDynamic">
                                        <a-icon class="btns-icon" type="search" />
                                        <div class="btns-text">查询</div>
                                    </div>
                                </a-col>
                            </a-col>
                            <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                                <a-col :offset="22" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                                    <div class="btns" @click="exportOrder">
                                        <a-icon class="btns-icon" type="export" />
                                        <div class="btns-text">导出</div>
                                    </div>
                                </a-col>
                            </a-col>
                        </a-row>
                    </div>
                    <section>
                        <a-row>
                            <a-col :span="24">
                                <div class="table-box">
                                    <a-table id="bills_tb" :columns="columns" :data-source="dataSource" :pagination="pagination" :rowClassName="rowClassName"  :customRow="customClick" :size="small" :scroll="{x:600,y:320}" bordered style="min-height:390px;">
                                        <template slot="baseQuantity" slot-scope="text,record">
                                            <div>{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="beginQuantity" slot-scope="text,record">
                                            <div>{{text | NumFormat}}</div>
                                        </template>
                                        <template slot="currentQuantity" slot-scope="text,record">
                                            <div>{{text | NumFormat}}</div>
                                        </template>
                                    </a-table>
                                </div>
                            </a-col>
                        </a-row>
                        <a-tabs default-active-key="1" >
                             <a-tab-pane key="1" tab="物料明细" style="position:relative">
                                 <a-row>
                                    <a-col :span="24">
                                        <div class="table-box">
                                            <a-table id="bills_tb_detail" :columns="pickColumns" :data-source="pickDataSource" :pagination="false"  :size="small" :scroll="{x:600,y:320}" bordered style="min-height:320px;">
                                                <template slot="baseQuantity" slot-scope="text,record">
                                                    <div>{{text | NumFormat}}</div>
                                                </template>
                                                <template slot="cumQualifiedQuantity" slot-scope="text,record">
                                                    <div>{{text | NumFormat}}</div>
                                                </template>
                                                <template slot="cumUnqualifiedQuantity" slot-scope="text,record">
                                                    <div>{{text | NumFormat}}</div>
                                                </template>
                                                <template slot="cumReworkQuantity" slot-scope="text,record">
                                                    <div>{{text | NumFormat}}</div>
                                                </template>
                                                <template slot="cumScrapQuantity" slot-scope="text,record">
                                                    <div>{{text | NumFormat}}</div>
                                                </template>
                                            </a-table>
                                        </div>
                                    </a-col>
                                </a-row>
                             </a-tab-pane>
                        </a-tabs>
                         
                        <div class="edit-mask" v-show="editMask">
                            <!-- 遮罩（点击修改关闭遮罩） -->
                        </div>
                    </section>
                </div>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <!-- <div v-html="stylePrint"></div> -->
        <print-modal ref="printDom" v-if="printVisible" :incomingPrintData="incomingPrintData" @cancelPrint="cancelPrint"></print-modal>

        <!--查询弹窗-->
        <search-wrapper-not-plan ref="searchWrapperRef" @newPlan="getMyselfPlan" @changePlane="changePlane" :type="searchType" @searchPlan="searchPlan">
            <template slot="searchConditions">
                <a-col :span="12">
                    <div class="filter">
                        <label class="filter-label">入库日期：</label>
                        <div class="filter-control">
                            <a-date-picker format="YYYY-MM-DD"  v-model="postData.inDateStartMoment"  /> 至
                            <a-date-picker format="YYYY-MM-DD"  v-model="postData.inDateEndMoment"/>
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="filter">
                        <label class="filter-label">生产车间：</label>
                        <div class="filter-control">
                            <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('officeNameRef')"></div>
                            <a-input-search placeholder="请选择生产车间：" v-model="officeName" size="small" @search="handleSearch('officeNameRef')" />
                            <form-search-group ref="officeNameRef" :dynamicData="{name:'生产车间：',val:'office',code:'officeIdId',value:officeName}" @clickItem="onOfficeNameCallBack"></form-search-group>
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="filter">
                        <label class="filter-label">物料名称：</label>
                        <div class="filter-control" ref="inventoryNameWarpper" id="inventoryNameId">
                            <a-input size="small" :style="{'position':'relative','z-index':zIndex}" v-model="inventoryName" @pressEnter="handleEnter(2)" @change="handleNameChange()" @click="handlInputArchives(3,'inventoryNameWarpper')" />
                            <searchArchivesName v-if="maskArchivesName" ref="searchArchivesRefName" :inventoryDomTop="inventoryDomTop" :inputType="inputType" :inputVal="inputVal" @closeArchives="closeArchives" @check="checkArchives"></searchArchivesName>
                            <div class="mask-archives-name" v-show="maskArchivesName" @click="handlCloseArchives"></div>
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="filter">
                        <label class="filter-label">物料编码：</label>
                        <div class="filter-control">
                           {{inventoryCode}}
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="filter">
                        <label class="filter-label">规格型号：</label>
                        <div class="filter-control">
                            {{inventorySpecification}}
                        </div>
                    </div>
                </a-col>
            </template>
        </search-wrapper-not-plan>
    </div>
</template>
<script>

import { searchWrapperNotPlan } from '@/components/SearchWrapper/';
import { postAction, exportPostAction } from "@/api/manage";
import moment from "moment";
import { list as ListPeriod } from "@/api/erp/period";//获取会计期间
import { Controlwidth } from "@/utils/antTableComponents";
import FormSearchGroup from '@/components/Form/FormSearchGroup';

import searchArchives from '@/components/OrderDynamicForm/searchArchives'
import searchArchivesName from '@/components/OrderDynamicForm/searchArchivesName'
import searchArchivesType from '@/components/OrderDynamicForm/searchArchivesType'

export default {
    components: {
        FormSearchGroup,        //搜索选择
        searchArchives,         //物料
        searchArchivesName,     //物料名称
        searchArchivesType,
        searchWrapperNotPlan,     //物料分类
    },
    data () {
        let pickColumns = [
                {
                    title: '生产订单编号',
                    dataIndex: 'voucherCode',
                    width: 120,
                    align: 'left',
                }, 
                {
                    title: '材料名称',
                    dataIndex: 'inventoryName',
                    width: 120,
                    align: 'left',
                }, {
                    title: '材料编码',
                    dataIndex: 'inventoryCode',
                    width: 150,
                    align: 'left',
                },
                {
                    title: '预计开工日期',
                    dataIndex: 'expectStartDate',
                    width: 120,
                    align: 'left',
                }, 
                 {
                    title: '材料规格型号',
                    dataIndex: 'inventorySpecification',
                    width: 120,
                    align: 'left',
                },  {
                    title: '主计量名称',
                    dataIndex: 'baseUnitName',
                    width: 100,
                    align: 'left',
                }, {
                    title: '来源bom版本号',
                    dataIndex: 'bomName',
                    width: 100,
                    align: 'left',
                }, {
                    title: '需要数量',
                    dataIndex: 'requireQuantity',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'requireQuantity'
                    }
                },
                 {
                    title: '需要基础数量',
                    dataIndex: 'baseRequireQuantity',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'baseRequireQuantity'
                    }
                }, 
                {
                    title: '损耗数量',
                    dataIndex: 'lossQuantity',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'lossQuantity'
                    }
                },    {
                    title: '损耗率（%）',
                    dataIndex: 'lossRate',
                    width: 100,
                    align: 'left',
                    scopedSlots: {
                        customRender: 'lossRate'
                    }
                }, 
                 {
                    title: '应领数量',
                    dataIndex: 'plannedQuantity',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'plannedQuantity'
                    }
                }, 
                 {
                    title: '期初领料数量',
                    dataIndex: 'beginQuantity',
                    width: 120,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'beginQuantity'
                    }
                }, 
                 {
                    title: '本期领料数量',
                    dataIndex: 'currentQuantity',
                    width: 100,
                    align: 'right',
                     scopedSlots: {
                        customRender: 'currentQuantity'
                    }
                }, 
                 {
                    title: '差异数量',
                    dataIndex: 'diffQuantity',
                    align: 'right',
                    width: 100,
                    scopedSlots: {
                        customRender: 'plannedQuantity'
                    }
                }];
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            columns: [
                {
                    title: '生产订单编号',
                    dataIndex: 'voucherCode',
                    width: 120,
                    align: 'left',
                }, {
                    title: '单据日期',
                    dataIndex: 'voucherDate',
                    width: 100,
                    align: 'left',
                },
                {
                    title: '生产车间',
                    dataIndex: 'officeName',
                    width: 150,
                    align: 'left',
                },
                {
                    title: '单据状态',
                    dataIndex: 'voucherState',
                    width: 60,
                    align: 'left',
                    customRender: (text) => {
                        return text == -1 ? '未提交' : text == 0 ? '已提交' : text == 1 ? '已审核' : text == 2 ? '已确认': text == 10 ? '已完成' : '';
                    }
                },
                {
                    title: '开工日期',
                    dataIndex: 'startDate',
                    width: 120,
                    align: 'left',
                }, 
                 {
                    title: '完工日期',
                    dataIndex: 'finishDate',
                    width: 120,
                    align: 'left',
                }, 
                
                {
                    title: '产品编码',
                    dataIndex: 'inventoryCode',
                    width: 100,
                    align: 'left',
                }, {
                    title: '产品名称',
                    dataIndex: 'inventoryName',
                    width: 100,
                    align: 'left',
                }, {
                    title: '规格型号',
                    dataIndex: 'inventorySpecification',
                    width: 120,
                    align: 'left',
                }, {
                    title: 'bom版本号',
                    dataIndex: 'bomName',
                    width: 120,
                    align: 'left',
                },
                 {
                    title: '计量单位',
                    dataIndex: 'baseUnitName',
                    width: 60,
                    align: 'left',
                }, 
                {
                    title: '计划生产数量',
                    dataIndex: 'baseQuantity',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'baseQuantity'
                    }
                }, {
                    title: '期初入库数量',
                    dataIndex: 'beginQuantity',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'beginQuantity'
                    }
                }, 
                 {
                    title: '本期入库数量',
                    dataIndex: 'currentQuantity',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'currentQuantity'
                    }
                }
                ],
            pagination: {
                size: "small",
                defaultPageSize: 10,
                current: 1,
                pageSize: 10,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input style="height:22px !important;width:3.2rem;"
                                value={this.pagination.pageSize}
                                min={1}
                                max={10}
                                size="small"
                                step={1}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                onChange: (page, pageSize) => {
                    this.pagination.current = page;
                    this.getList();
                },
            },
            customClick: (record, index) => ({
                on: {
                    click: (event) => {
                        event.preventDefault();
                        this.clickRecord = record;
                        this.listProductionPickVo(record.id);
                    },
                },
            }),
            dataSource: [],             //产品入库情况
            setTime: null,  //延迟请求
            tableExplandKey: [],//默认展开的行
            maskArchives: false,
            maskArchivesName: false,
            maskArchivesType: false,
            zIndex: 5,
            zIndexType: 5,
            inputType: null,
            postData: {
                dataSource: ["ProductionWork","DelegateProductionWork"], // 单据类型
                inDateStartMoment: moment().startOf('month'),
                inDateEndMoment: moment(),
                inDateStart: null,
                inDateEnd: null,
                officeId: null,
                inventoryId: null,
            },
            officeName: "",         // 生产车间名称 显示
            inventoryCode: "",  
            inventorySpecification: "",    
            pickColumns,
            pickDataSource: [],         //领料情况
            clickRecord:{},             //选择的
        };
    },
    updated () {
        Controlwidth("bills_tb", 50);
        Controlwidth("bills_tb_detail", 50);
    },
    created () {
    
    },
    activated () {
        this.getList();
    },
    methods: {
        moment,
        //导出
        exportOrder () {
            exportPostAction('/production/work/pageProductionWorkCumSummaryVo', this.postData).then(response => {
                let url = window.URL.createObjectURL(
                    new Blob([response], { type: "application/vnd.ms-excel" })
                );
                let link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                link.setAttribute("download", "生产订单执行汇总表.xls");
                document.body.appendChild(link);
                link.click();
            }).catch(error => { });
        },
        printOrder () {
            //打印
            this.$print(this.$refs.print);
        },
        //动态查询搜索条件
        searchDynamic () {
            this.$refs.searchWrapperRef.showModel();
        },
        searchGroup (t) {
            if (t == 1) {
                this.$refs.credentialsSearch.showModal();
            } else {
                //延迟请求
                if (this.setTime) {
                    clearTimeout(this.setTime)
                }
                this.setTime = setTimeout(() => {
                    this.$refs.credentialsSearch.inputSearch();
                }, 500)
            }
        },
        onOfficeNameCallBack(data){
            this.officeName = data.name;
            this.postData.officeId = data.id;
        },
        onChangeDateStart (value, mode) {
            console.log(value, mode)
            this.voucherDateStart = mode;
        },
        onChangeDateEnd (value, mode) {
            console.log(value, mode)
            this.voucherDateEnd = mode;
            this.compareTime(this.voucherDateStart, this.voucherDateEnd)
        },
        compareTime (start, end) {
            //比较日期大小
            let oDate1 = new Date(start);
            let oDate2 = new Date(end);
            if (oDate1.getTime() > oDate2.getTime()) {
                this.voucherDateStart = this.voucherDateEnd;
            }
        },
        onPeriodDate (dates, dateStrings) {
            //期间
            console.log('From: ', dates[0], ', to: ', dates[1]);
            console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
            console.log(dateStrings);
            this.periodDate = dateStrings;
            this.startPeriod = dateStrings[0].slice(0, 7);
            this.endPeriod = dateStrings[1].slice(0, 7);
        },
        //获取列表 生产入库领料查询 -- 产品入库情况
        getList () {
            // this.tableExplandKey = Array.from(new Set(this.tableExplandKey)); // 利用Array.from将Set结构转换成数组
            this.tableExplandKey = []; // 利用Array.from将Set结构转换成数组
            this.postData.page = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                    };
            if(this.postData.inDateStartMoment){
                this.postData.inDateStart = this.postData.inDateStartMoment.format("YYYY-MM-DD") + " 00:00:00";
            }
            if(this.postData.inDateEndMoment){
                this.postData.inDateEnd = this.postData.inDateEndMoment.format("YYYY-MM-DD") + " 23:59:59";
            }
            postAction('/production/work/pageProductionInMainVo', this.postData).then(response => {
                if (response.code === 200) {
                    if (response.data ) {
                        this.pagination.total = response.data.total;
                        this.dataSource = response.data.records;
                    } else {
                        this.dataSource = [];
                    }
                }
            }).catch(error => { });
        },
        //生产入库领料查询 -- 对应产品领料情况
        listProductionPickVo (productionWorkDetailId) {
            // this.tableExplandKey = Array.from(new Set(this.tableExplandKey)); // 利用Array.from将Set结构转换成数组
            this.tableExplandKey = []; // 利用Array.from将Set结构转换成数组
            this.postData.page = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                    };
            if(this.postData.inDateStartMoment){
                this.postData.inDateStart = this.postData.inDateStartMoment.format("YYYY-MM-DD") + " 00:00:00";
            }
            if(this.postData.inDateEndMoment){
                this.postData.inDateEnd = this.postData.inDateEndMoment.format("YYYY-MM-DD") + " 23:59:59";
            }
            this.postData.productionWorkDetailId = productionWorkDetailId;
            postAction('/production/work/listProductionPickVo', this.postData).then(response => {
                if (response.code === 200) {
                    if (response.data ) {
                        let {voucherCode} = this.clickRecord;
                        this.pickDataSource = response.data;
                        this.pickDataSource.forEach(f=>f.voucherCode = voucherCode);

                    } else {
                        this.pickDataSource = [];
                    }
                }
            }).catch(error => { });
        },
        
        //改变分页大小
        changePageSize (e) {
            const value = e.target.value;
            let size = Number.parseInt(value);
            if (!size) {
                size = 10;
            }
            if (size > 500) {
                size = 500;
            }
            Object.assign(this.pagination, {
                current: 1,
                pageSize: size,
            });

            this.getList();
        },
        handleSearch (n) {
            this.$refs[`${n}`].showModal();
        },
        handlInputArchives (type, ref) {

            document.getElementsByClassName('ant-modal-content')[0].style.transform = 'none';

            this.inputType = type;
            if (type == 1 || type == 2) {
                this.maskArchives = true;
                this.zIndex = 1;
                this.zIndexType = 1;
            } else if (type == 3) {
                this.zIndex = 5;
                this.zIndexType = 1;
                this.maskArchivesName = true;
            } else if (type == 4) {
                this.zIndexType = 6;
                this.zIndex = 1;
                this.maskArchivesType = true;
            }
            //获取位置
            console.log(this.$refs[`${ref}`].parentNode.offsetTop);
            let loc = this.$refs[`${ref}`].getBoundingClientRect();
            this.inventoryDomTop = Math.abs(loc.top);
        },
        handleNameChange () {
            console.log("输入变化...",this.inventoryName);
            //物料名称搜索
            this.$refs.searchArchivesRefName.inputVal = this.inventoryName;
            this.$refs.searchArchivesRefName.getData(1);
            this.postData.inventoryId = null;
            this.inventoryCode = null;
            this.inventorySpecification = null;
        },
        handleArchiveChange () {
            //物料编码搜索
            console.log(this.inputType)
            if (this.inputType == 1) {
                this.inputVal = this.beginCode;
            } else {
                this.inputVal = this.endCode;
            }
            this.$refs.searchArchivesRef.inputVal = this.inputVal;
            this.$refs.searchArchivesRef.getData(1);
        },
        handleEnter (t) {
            if (t == 1) {
                this.$refs.searchArchivesRef.handleEnter();
            } else {
                this.$refs.searchArchivesRefName.handleEnter();
            }
        },
        closeArchives () {
            this.maskArchives = false;
            this.maskArchivesName = false;
            this.maskArchivesType = false;
        },
        //关闭物料档案弹窗
        handlCloseArchives () {
            document.getElementsByClassName('ant-modal-content')[0].style.transform = 'translate(0px, 0px)';

            if (this.inputType == 1 || this.inputType == 2) {
                this.maskArchives = false;
                this.$refs.searchArchivesRef.closeModel();
            } else if (this.inputType == 3) {
                this.maskArchivesName = false;
                this.$refs.searchArchivesRefName.closeModel();
            } else if (this.inputType == 4) {
                this.maskArchivesType = false;
                this.$refs.searchArchivesRefType.closeModel();
            }
        },
        //物料选择范围-----------------------------------
        checkArchives (data) {
            this.maskArchives = false;
            this.maskArchivesName = false;
            //返回值处理
            if (data[1] == 1) {
                //起始值
                this.beginCode = data[0][0].inventoryCode;
            }
            if (data[1] == 2) {
                //起始值
                this.endCode = data[0][0].inventoryCode;
            }
            if (data[1] == 3) {
                //物料编码名称
                this.inventoryName = data[0][0].inventoryName;
                this.inventoryCode = data[0][0].inventoryCode;
                this.inventorySpecification = data[0][0].inventorySpecification;
                this.postData.inventoryId = data[0][0].id;
            }

            if (data[1] == 4) {
                //物料分类
                console.log(data[0]);
                let tData = data[0].checkedNodes;
                let typeNameArray = [];
                let typeIdArray = [];
                tData.forEach(item => {
                    typeNameArray.push(item.data.class);
                    typeIdArray.push(item.data.props.id);
                });

                this.inventoryTypeNameArray = typeNameArray.join(';')
                this.inventoryTypeIdArray = typeIdArray;
            }

            this.closeArchives();
        },
        rowClassName (record, index) {
            return record === this.clickRecord ? 'changeColorClass' : '';
        },
        searchPlan () {
            this.pagination.current = 1;
            this.getList();
            this.$refs.searchWrapperRef.cancel();//关闭弹窗
        },
        syncFun () {
            //刷新
            this.getList();
        },
        expand (expanded, record) {
            //点击展开图标时触发
            let id = record.key;
            if (expanded) {
                this.tableExplandKey.push(id)
            } else {
                this.tableExplandKey.splice(this.tableExplandKey.findIndex(e => e === id), 1);
            }
        }
    }
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';

    .changeColorClass {
        font-weight: bold;
        background-color: #fffceb;
    }
    .credentials-wrapper {
        padding: 10px;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .date-tp {
            margin-bottom: 10px;
            .header-tp {
                text-align: left;
            }
        }
        .footer-tp {
            text-align: center;
            margin-top: 10px;
        }

        .text-name {
            // border-bottom: 2px solid rgba(0, 0, 0, 0.8);
            padding-bottom: 5px;
        }

        .bills-box-header {
            display: flex;
            justify-content: space-around;
            .filter {
                display: table;
                width: 280px;
                margin-bottom: 5px;
                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    line-height: 32px;
                    white-space: nowrap;
                    vertical-align: bottom;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .filter-control {
                    display: table-cell;
                    width: 100%;
                }
            }
        }
    }
    .date-radio-box {
        border: 1px solid #ccc;
        padding: 8px;
        .ant-radio {
            margin-top: 20px;
        }
        span.ant-radio + * {
            padding: 0;
            padding-right: 4px;
        }
    }
</style>
<style lang="less" scoped>
 .filter-label {
    width: 160px !important;
 }
 .hoverWorkStyle {
        background-color: rgba(24, 144, 255, 0.2);
        td {
            color: #222;
        }
    }
</style>